<template>
  <div id="employee">
    <div class="employee-top">
      <el-input style="width: 240px;margin-left: 10px;margin-right: 20px;" placeholder="请输入职员编号" v-model="input"
        clearable>
      </el-input>
      <el-button type="primary">查询</el-button>
      <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="">导出</el-button>
    </div>
    <div class="employee-content">
      <el-table :data="tableData" border style="width: 100%;font-size: 13px;margin-left: 30px;">
        <el-table-column fixed prop="employeeCode" label="职员编号" width="260">
        </el-table-column>
        <el-table-column prop="employeeName" label="职员名称" width="150">
        </el-table-column>
        <el-table-column prop="employeePhone" label="手机号码" width="150">
        </el-table-column>
        <el-table-column prop="aName" label="部门" width="150">
        </el-table-column>
        <el-table-column prop="rName" label="角色" width="150">
        </el-table-column>
        <el-table-column prop="status" label="是否启用" width="120">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.zip" active-color="#66b1ff" inactive-color="#c1c1c1" active-value="200333"
              inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column  prop="employeeId" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="delet(scope.row.employeeId)" type="text" size="small">删除</el-button>
            <el-button type="text" @click="look(scope.row.employeeId)" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog width="450px" top="100px" title="新增职员" :visible.sync="dialogFormVisible">
     <table>
      <tr>
        <td>职员编号</td>
        <td><el-input v-model="employee.employeeCode"></el-input></td>
      </tr>
      <br>
      <tr>
        <td>职员名称</td>
        <td><el-input v-model="employee.employeeName"></el-input></td>
      </tr>
      <br>
      <tr>
        <td>手机号码</td>
        <td><el-input v-model="employee.employeePhone"></el-input></td>
      </tr>
      <br>
      <tr>
        <td>部门</td>
        <td><el-select v-model="employee.departId" placeholder="请选择部门">
            <el-option v-for="item in options" :key="item.relationId" :label="item.relationName" :value="item.relationId">
            </el-option>
          </el-select></td>
      </tr>
      <br>
      <tr>
        <td>角色</td>
        <td><el-select v-model="employee.rid" placeholder="请选择角色">
            <el-option v-for="item in option" :key="item.rid" :label="item.roleName" :value="item.rid">
            </el-option>
          </el-select></td>
      </tr>
      <br>
    </table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </div>
    </el-dialog>
 <el-dialog width="450px" top="100px" title="编辑职员" :visible.sync="dialogFormVisibled">
     <table>
      <tr>
        <td>职员编号</td>
        <td><el-input v-model="employee.employeeCode"></el-input></td>
      </tr>
      <br>
      <tr>
        <td>职员名称</td>
        <td><el-input v-model="employee.employeeName"></el-input></td>
      </tr>
      <br>
      <tr>
        <td>手机号码</td>
        <td><el-input v-model="employee.employeePhone"></el-input></td>
      </tr>
      <br>
      <tr>
        <td>部门</td>
        <td><el-select v-model="employee.departId" placeholder="请选择部门">
            <el-option v-for="item in options" :key="item.relationId" :label="item.relationName" :value="item.relationId
            ">
            </el-option>
          </el-select></td>
      </tr>
      <br>
      <tr>
        <td>角色</td>
        <td><el-select v-model="employee.rid" placeholder="请选择角色">
            <el-option v-for="item in option" :key="item.rid" :label="item.roleName" :value="item.rid">
            </el-option>
          </el-select></td>
      </tr>
      <br>
    </table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibled = false">取 消</el-button>
        <el-button type="primary"  v-model="employee.employeeId" @click="update()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>


export default {
  name: 'employee',

  data() {
    return {

 dialogFormVisibled: false,
      dialogFormVisible: false,
      switchValue: '1',
      options: [],
      value: '',
      input: '',
      tableData: [],
      option:[],
      employee: {
        employeeCode: '',
        employeeName: '',
        employeePhone: '',
        rid:'',
        departId:'',
        employeeId:''
      },

    }
  },
  methods: {
    getList(){
        this.axios({
          url: '/info/employee/list',
          params:{
                  pageNum:1,
                  pageSize:5
          }
        }).then(res => {
          console.log(res)
          this.tableData = res.data.pageInfo.list
        })
    },
   getDepart(){
   this.axios({
    url:'/info/relation/selectRe',
  }).then(rs=>{
      this.options=rs.data.ralation
  })
   },
   getRoles(){
    this.axios({
      url:'/info/role/list',
    }).then(rs=>{
     console.log(rs)
     this.option=rs.data.list
})
   },
    save(){
      this.axios({
        url:'/info/employee/add',
        method:'post',
        data:{
          ...this.employee
        }
      }).then(rs=>{
        if(rs.data.isAdd===true){
          alert("增加成功")
          this.getList()
          this.dialogFormVisible = false
        }else{
          alert("增加失败")
          this.dialogFormVisible = false
        }
      })
    },
    look(id){
     this.dialogFormVisibled = true
     this.axios({
       url:'/info/employee/one',
       params:{
        employeeId:id
       }
     }).then(rs=>{
       console.log(rs)
       this.employee = rs.data.employee
     })
    },
    update(){
      alert(this.employee.employeeId)
      this.axios({
        url:'/info/employee/update',
        method:'post',
        data:{
          ...this.employee
        }
      }).then(rs=>{
        if(rs.data.isUpdate===true){
          alert("修改成功")
          this.dialogFormVisibled = false
          this.getList()
        }else{
          alert("修改失败")
          this.dialogFormVisibled = false
    }})},
    delet(id){
      alert(id)
      if(confirm("是否删除")){
   this.axios({
        url:'/info/employee/update',
        method:'post',
        data:{
          ...this.employee
        }
      }).then(rs=>{
        if(rs.data.isDelete===true){
          alert("删除成功")
        }else{
          alert("删除失败")
        }
      })
      }
    }

  },created(){
    this.getList()
    this.getDepart()
    this.getRoles()
  }

}
</script>

<style scoped>
#employee {
  width: 100%;
  height: 100%;
}

.employee-top {
  width: calc(100% -20px);
  height: 60px;
  /* background-color: pink; */
  line-height: 60px;
  padding-left: 20px;
  font-size: 13px;
}

.employee-content {
  width: 100%;
  height: calc(100% - 60px);
  /* background-color: skyblue; */
}

.el-input,
.el-button {
  font-size: 13px;
}

/* 
/deep/ .el-dialog {
  height: 600px;
} */
</style>